import React, { Component } from 'react';
import { AutoComplete, Icon, Input, Upload, message } from 'antd';
import { PicturePreview } from 'ppfish';
import styles from './index.less';

export default class XqUpload extends Component {
  static defaultProps = {
    defaultActiveFirstOption: false,
    onPressEnter: () => {},
    onSearch: () => {},
    onChange: () => {},
    className: '',
    placeholder: '',
    dataSource: [],
    defaultOpen: false,
    onVisibleChange: () => {},
  };

  static getDerivedStateFromProps(props) {
    if ('open' in props) {
      return {
        searchMode: props.open,
      };
    }
    return null;
  }

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      activeIndex: 0,
      fileData: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'image.png',
          status: 'done',
          url: 'https://nos.netease.com/ysf/3df2280d2319678a091138b0bbba82fe',
          src: 'https://nos.netease.com/ysf/3df2280d2319678a091138b0bbba82fe',
        },
      ],
    };
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
  }

  handlePreview = async file => {
    const { fileData } = this.state;
    this.setState({
      visible: true,
      activeIndex: fileData.findIndex(item => item.uid === file.uid),
    });
  };

  handleClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    // const { className, placeholder, open, ...restProps } = this.props;
    const { activeIndex, visible, fileData } = this.state;
    const props = {
      name: 'file',
      multiple: true,
      listType: 'picture-card',
      fileList: fileData,
      onPreview: this.handlePreview,
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      transformFile(file) {
        return new Promise(resolve => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const canvas = document.createElement('canvas');
            const img = document.createElement('img');
            img.src = reader.result;
            img.onload = () => {
              const ctx = canvas.getContext('2d');
              ctx.drawImage(img, 0, 0);
              ctx.fillStyle = 'red';
              ctx.textBaseline = 'middle';
              ctx.fillText('Ant Design', 20, 20);
              canvas.toBlob(resolve);
            };
          };
        });
      },
      onChange(info) {
        console.log('info', info);
        const { status } = info.file;
        if (status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (status === 'done') {
          message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">点击/拖拽</div>
      </div>
    );
    return (
      <div>
        <Upload {...props}>
          { fileData.length >= 8 ? null : uploadButton }
        </Upload>
        <PicturePreview
          activeIndex={activeIndex}
          source={fileData}
          toolbar
          visible={visible}
          onClose={this.handleClose}
        />
      </div>
    );
  }
}
